<template>
  <div class="searchBar tabbar" @click="goSearch($event)">
    <div class="search">
        <i class="icon icon-search"></i>
        <div class="search_inner swiper swiper-no-swiping">
          <div class="swiper-wrapper">
            <div class="swiper-slide ellipsis" v-for="item in recommendBestSell" :key="item.bid" :data-rec="item.bName">
              {{item.bName}}
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import { mapState } from 'vuex'
export default {
  name: 'SearchBar',
  data () {
    return {
    }
  },
  mounted (){
    if (this.recommendBestSell.length > 0){
      this.initSwiper()
    }
  },
  methods: {
    goSearch (e) {
      let recommend = ''
      for (let i = 0; i < e.path.length; i++){
        recommend = e.path[i].dataset.rec
        if (recommend) break
      }
      if (!this.isInSearch) this.$router.replace({ name: 'Search', query: { recommend } })
    },
    initSwiper (){
      return new Swiper('.search_inner', {
        direction: 'vertical',
        autoplay: true,
        loop: true

      })
    }
  },
  computed: {
    ...mapState({ recommendBestSell: (state) => state.novel.recommendBestSell })
  },
  watch:{
    recommendBestSell: {
      handler (){
        this.$nextTick(() => {
          this.initSwiper()
        })
      }
    }
  }

}
</script>

<style lang="less" scoped>
.searchBar{
    max-width: var(--base-width);
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    right: 0;
    max-width: var(--base-width);
    margin: 0 auto;
    height: 50px;
    background-color: var(--box-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search{
        line-height: 50px;
        width: 90%;
        flex:1;
        margin: 0 5%;
        border-radius:20px ;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background-color: var(--main-darken-bg);
        .icon{
            margin:0 8px 0 15px;
            font-size: 15px;
            height: 30px;
            line-height: 30px;
        }
        .search_inner{
            font-size: 14px;
            letter-spacing: 1px;
            color: var(--icon-color);
            flex: 1;
            overflow: hidden;
            height: 30px;
            .swiper-slide{
              height: 30px!important;
              line-height: 30px;
            }
        }
    }

}
</style>
